<!-- 日历插件事件 -- 郭萍 -- 2017年5月 -->
<template>
  <el-row>
    <el-col style="width: 150px" class="event-item" :class="cssClasses"
            @click="$emit('click', event, $event)">
      <p>成人价：</p>
      <p style="color: red">禁售</p>
      <p>售：150.00结：100.00</p>
      <p>儿童价：</p>
      <p style="color: red">禁售</p>
      <p>售：130.00结：80.00</p>
      <p>房差：</p>
      <p style="color: red">禁售</p>
      <p>售：360.00结：300.00</p>
      <p>现询 提前0天00点00分</p>
      <p>适用行程：A行程</p>
    </el-col>
  </el-row>
</template>

<script>
  import moment from 'moment'

  export default {
    props: ['event', 'date', 'firstDay'],
    computed: {
      cssClasses () {
        let cssClasses = this.event.cssClass

        if (!Array.isArray(cssClasses)) {
          cssClasses = [cssClasses]
        } else {
          cssClasses = Array.from(cssClasses)
        }

        if (this.start.isSame(this.date, 'day')) {
          cssClasses.push('is-start')
        }

        if (this.end.isSame(this.date, 'day')) {
          cssClasses.push('is-end')
        }

        if (!this.event.isShow) {
          cssClasses.push('is-opacity')
        }
        return cssClasses.join(' ')
      },
      showTitle () {
        return (this.date.day() === this.firstDay || this.start.isSame(this.date, 'day'))
      },
      start () {
        return moment(this.event.start)
      },
      end () {
        return moment(this.event.end)
      }
    }
  }
</script>
